import styled from 'styled-components'

const CommunityListContainer = styled.div `

    .container{
        width:3.43rem;
        height:3rem;
        background:url(${({backgroundImg})=>backgroundImg});
        background-position: center center;
        background-size:cover;
        border-radius:0.15rem;
        padding:0.2rem;
        position:relative;
        margin-bottom:0.1rem;
        .icon{
            display:flex;
            flex-direction:row;
            justify-content: space-between;
            
            h1{
                padding:0.075rem 0 0 0;
                width:1.28rem;
                height:0.34rem;
                img{
                    height:100%;
                    width:100%
                }
            }
            span{
                padding:0.05rem 0.1rem;
                margin-left:0.4rem;
                display:flex;
                flex-direction:column;
                align-items:center;
                background:rgba(47,48,51,.6);
                i{
                    text-align:center;
                    line-height:0.16rem;
                    color:#ffaf40;
                    font-size:0.14rem;
                    font-weight:300;
                }
                b{
                    margin-top:0.01rem;
                    line-height:0.16rem;
                    color:#fff;
                    font-size:0.06rem;
                    font-family:Arial, Helvetica, sans-serif;
                    font-weight:200
                }
            }
        }
        .title{
            position: absolute;
            bottom:0.2rem;
            h2{
                line-height:0.3rem;
                font-size:0.22rem;
                color:#fff;
                font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                margin:0 0 0.13rem;
                font-weight:500
            }
            h3{
                font-size:0.12rem;
                line-height:0.17rem;
                margin:0 0 0.01rem;
                color:#fff;
                font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                white-space:nowrap;
                text-overflow:ellipsis;
                word-break:break-all;
                overflow:hidden;
                width:3rem;
                font-weight:300;
            }
    }
    }
`
export {
    CommunityListContainer
}